<template>
  <div class="box">
       <div class="container">
             <div class="backBox" @click="$router.go(-1)">
              <div class="backButton">←</div>
           </div>
          <div class="stadiumBox">
            <div class="stadiumPicture">
              <img :src="selectedStadium.picUrl" alt="">
            </div>
            <div class="stadiumInfo">
              <div class="title">{{selectedStadium.sname}}</div>
              <div class="intro">{{selectedStadium.intro==''?'该球馆暂时没有简介哦~':selectedStadium.intro}}</div>
            </div>
          </div>
          <!-- 日期选择卡部分 -->
          <div class="dateSelectBox">
               <div :class="day==index?'dateItem active':'dateItem' " v-for="(dateTime,index) in dateTimeList" :key="index" @click="changeDate(index)">
                  <div class="date"><span>{{dateTime.date}}</span> </div>
                  <div class="day"><span>{{dateTime.day}}</span> </div>
               </div>
          </div>
          <!-- 选项卡部分 -->
           <el-tabs v-model="activeName">
            <el-tab-pane label="预定场次"  name="reserve" v-if="isReloadData">
       
              <!-- 预约部分 -->
          <table class="courtTable" border="2" >    
            <tr>
              <th class="thead"> 场地\时段</th>
              <th>08:00-09:00</th>
              <th>09:00-10:00</th>
              <th>10:00-11:00</th>
              <th>11:00-12:00</th>
              <th>12:00-13:00</th>
              <th>13:00-14:00</th>
              <th>14:00-15:00</th>
              <th>15:00-16:00</th>
              <th>16:00-17:00</th>
              <th>17:00-18:00</th>
              <th>18:00-19:00</th>
            </tr>
            <tr class="courtRow" v-for="court in courtList" :key="court.cid" > 
              <td class="courtName">{{court.cname}}</td>
              <td v-for="t in timeList" :key="t" 
              :class="courtTimeState(t,court).class"
              @click="showReserveDialog($event,court,t)" 
              >{{courtTimeState(t,court).text}}
              </td>
           
            </tr>
          </table>

        
            </el-tab-pane>
            <el-tab-pane label="球馆评论" name="introduce"><CommentPage :uid="userData.uid" :sid="selectedStadium.sid" :key="timer" @submitComment="reloadComment"/></el-tab-pane>
  
          </el-tabs>
          <!-- 添加订单对话框 -->
           <el-dialog width="400px" title="预约订单" :visible.sync="isShowAddList">
             <el-form ref="addListFormRef"  label-width="80px" :model="addListForm" >
                <el-form-item label="所属场馆:" >
                    <label style="color:#218be0">{{addListForm.sname}}</label>
                </el-form-item>
                <el-form-item label="场地名称:" >
                    <label style="color:#218be0">{{addListForm.cname}}</label>
                </el-form-item>
                 <el-form-item label="预约时段:" >
                     <label style="color:#218be0">{{addListForm.startTime +' -- '+addListForm.endTime}}</label>
                </el-form-item>
                <el-form-item label="下单日期:" >
                     <label style="color:#218be0">{{addListForm.orderDate}}</label>
                </el-form-item>
                <el-form-item label="下单时间:" >
                     <label style="color:#218be0">{{getTime('time')}}</label>
                </el-form-item>
             
                 <el-form-item class="formBtnBox"> 
                    <el-button type="primary" @click="submitOrderList">确定预约</el-button>
                    <el-button  @click="closeAddbox">取消预约</el-button>
                </el-form-item>
                
             </el-form>
        </el-dialog>
       </div>
  </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
import Api from '../../api'
import CommentPage from '../../components/CommentPage.vue'
export default {
  inject:['reload'],
  components:{
     CommentPage
  },
  data() {
    return {
      courtList:[],
      timeList:[8,9,10,11,12,13,14,15,16,17,18],
      activeName:'reserve',
      // 当前的day
      day:0,
      // 日期
      dateTimeList:[],
      isShowAddList:false,
      selectedStadium:{},
      showTable:true,
      isReloadData:true,
      orderList:[],
      // 添加预约订单的表单
      addListForm:{
        cname:'',
        startTime:'',
        endTime:'',
        sid:'',
        cid:'',
        uid:'',
        orderDate:'',
        sname:''
      },
      // 当前时间戳
      timer:'',
    }
  },
  methods: {
    // 获取场地数据
    getCourtData(){
       this.$store.dispatch('getCourtData').then(ok=>{this.courtList = this.courtListData.filter(item=>{
       return item.state == 1 && item.sid == this.$route.query.sid;})
      console.log(ok);
     } );
      
    },
    // 获取某个日期的订单数据
    getOrderData(day){
       this.$store.dispatch('getOrderListData').then(ok=>{
        console.log(ok);
        this.orderList = this.orderListData.filter(item=>{
          console.log(item.order_date,this.dateTimeList[day].date);
          return item.order_date  == this.dateTimeList[day].date
        })
      })
   
    },
    // 判断场次状态
     courtTimeState(t,court){
      let state ={
        text:'',
        class:''
      }
      if(t>=parseInt(court.startTime)&&t<=parseInt(court.endTime)){
         
         if(this.isReserve(t,court)) {
            state.text = '已占用';
            state.class = 'reserved';
            return state;
         }
          state.text = '可预约';
          state.class = 'enable';
         return state
         
      }else{
        state.text = '未开放';
        state.class = 'unable';
        return state
      }
  
    },
    // 判断场次是否被预约
    isReserve(t,court){
       let courtOrderList = this.orderList.filter(item=>{
         return item.cid == court.cid;
       })
       console.log(courtOrderList);
       return courtOrderList.some(item =>{
  
          return parseInt(item.start_time) == t;
       })
       },
    // 更新预约表格
    // 场次单元格的样式判断
    
    // 显示订单添加对话框
    showReserveDialog(e,court,t){
      console.log(court);
      if(e.target.innerText == '未开放'){return alert('场次未开放')} 
      if(e.target.innerText == '已占用'){return alert('该场次已被预约，请选择其他场次')}
      this.addListForm.uid = this.userData.uid;
      this.addListForm.cid = court.cid;
      this.addListForm.cname = court.cname;
      this.addListForm.startTime = this.times(t);
      this.addListForm.endTime = this.times(t+1);
      this.addListForm.orderDate = this.getNowDate(this.day).date;
      this.addListForm.sname = court.sname;
      this.isShowAddList = true;
   
   
    },
    closeAddbox(){
      this.isShowAddList = false;
    },
    // 时间段转化
    times(t){
       let time = t>=10?`${t}:00`:`0${t}:00`;
       return time;
    
    },
    // 提交订单的回调
    async submitOrderList(){
      const {data:res} = await Api.addOrderList(this.addListForm);
                 if(res.status !== 201 ) return this.$message.error('预约失败');
                 alert('预约成功,请去订单查询界面查看');
                 this.reloadPart();
                 this.isShowAddList =false;
                 sessionStorage.setItem('selectDay',this.day);
                 this.$router.go(0);
    },
    // 获取当前时间
    getTime(flag){
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth()+1;
      let Dateday = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();

      month = month>=10?month:`0${month}`;
      Dateday = Dateday>=10?Dateday:`0${Dateday}`;
      if(flag == 'date')
      return `${year}/${month}/${Dateday} `

      return `${hour}时${minute}分${second}秒`
    },
    // 局部刷新
    reloadPart(){
      this.reload();
    },
    // 获取后几天的日期
    getNowDate(num){
      let date = new Date();
      date.setDate(date.getDate()+num)
      let year = date.getFullYear();
      let month = date.getMonth()+1;
      let day = date.getDate();
      let Dateday = date.getDay();
      month = month>=10?month:`0${month}`;
      day = day>=10?day:`0${day}`;
        let time = {date:'',day:''}
        time.date = `${year}/${month}/${day}`
        time.day = this.getDay(Dateday)
        this.dateTimeList.push(time)
      return time;
      
     
    },
    // 获取星期几
    getDay(day){
      switch (day) {
        case 0: return '星期天';
        case 1: return'星期一';
        case 2: return'星期二';
        case 3: return'星期三';
        case 4: return'星期四';
        case 5: return'星期五';
        case 6: return'星期六';
        default:
          break;
      }
    },
    // 日期选中状态改变的回调
    changeDate(index){
        this.day = index;
        this.getOrderData(this.day);
    },
    // 通过时间戳刷新评论模块 
    reloadComment(){
      this.timer = new Date().getTime();
    }

  },
  computed:{
    ...mapState({
      courtListData:state => state.court.courtList,
    }),
    ...mapGetters({userData:'login/userData'})
    ,
    ...mapGetters({orderListData:'orderListData'})
    ,
    ...mapGetters({stadiumData:'stadiumListDataById'})

   
  },
  created() {
    this.getCourtData();
    if(sessionStorage.getItem('selectDay')){
      this.day =parseInt(sessionStorage.getItem('selectDay'));  
    }
    this.getOrderData(this.day);
    this.$store.dispatch('getStadiumDataById',parseInt(this.$route.query.sid)).then(ok=>{
      console.log(ok);
      this.selectedStadium = this.stadiumData[0];
  
    })

    for (let index = 0; index < 3 ;index++) {
       this.getNowDate(index);
    }
   
    

    
   
    
  },
  mounted() {
 
  },
} 
</script>

<style scoped lang="less">
    .box{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    
     .container{
         position: relative;
         width: 75%;
         height: auto;
         background: rgb(244, 241, 241);
          .backBox{
          background: #4e88d9;
          height: 50px;
          width: 50px;
          left: -55px;
          position: absolute;   
          color: white;
          font-size: 3em;
          text-align: center;
          line-height: 1.1em;
          border-radius: 2px;

          cursor: pointer;
         }
         .backBox:hover{
            opacity: 0.4;
          }
         .dateSelectBox{
           display: flex;
           width: 100%;
           height: 100px;
           border-bottom: 2px solid rgb(226, 218, 218);
           .dateItem{
              width: 180px;
              height: 80px;
              border-radius: 10px;
              background: #d5f0f6;
              box-shadow: 1px 1px 2px #4f535a;
              text-align: center;
              margin-right: 10px;
              margin-left: 5px;
              cursor: pointer;
              transition: 0.4s 0s linear;
              .date{
                width: 100%;
                background: #e79934;
                height: 25px;
                border-radius: 10px 10px 0 0;
                span{
                   color: white;
                }
              } 
              .day{
                span{
                  line-height: 50px;
                  font-weight: 600;
                  font-size: 1.1em;
                  color: #4a78c6;
                }
              }
           }
           .dateItem:hover{
             opacity: 0.6;
           }
           .dateItem.active{
              background: rgb(255, 255, 255);
               .date{
                   background: #f0b05d;
               }
           }
        }
        .el-tabs__item{
           font-weight: 500;
           font-size: 1.5em;
        }
         .stadiumBox{
           height: 200px;
           background:rgb(244, 241, 241);
           border-bottom: 2px solid rgb(176, 173, 173);
           margin-bottom: 10px;
           display: flex;
           padding: 5px;
           .stadiumPicture{
             background: paleturquoise;
             width:250px;
             height: 200px;

             img{
               width: 100%;
               height: 100%;
                border-radius: 5px;
             }
           }
           .stadiumInfo{
             padding-left: 10px;
             .title{
              font-size: 1.6em;
              color: rgb(42, 168, 231);
              margin-bottom: 5px;
              border-bottom: 2px solid #737e92;
            
              }
           }
           
         }
         .courtTable{
           border-collapse:collapse;
           height: auto;
          //  position: absolute;
          //  left: 0;
          //  right: 0;
          //  margin: auto;
           th{
             background: rgb(239, 185, 84);
           }
           .thead{
             height: 40px;
             background: rgb(146, 144, 144);
             
           }
           .courtRow{
              td{
                text-align: center;
                height: 30px;
                cursor: pointer;
                border-radius: 2px;
                
                
              }
 
              .courtName{
                width: 150px;
                background: rgb(79, 158, 222);
              }
              .unable{
                background: rgb(178, 173, 183);
                cursor: default;
              }
              .reserved{
                background: rgb(235, 41, 41);
              }
              .enable{
                background: rgb(105, 221, 87);
              }
              .enable:hover{
                background:rgb(140, 241, 103) ;
                color: #4f535a;
              }

             
           }
         }
       
     }
     
   
   }

</style>